import React, { useEffect } from "react";
import styles from "./index.module.scss";
import dayjs from "dayjs";
import { getData } from "../store/actions";
import { useDispatch, useSelector } from "react-redux";
import CountDown from "../components/CountDown";

function Coupons() {
  const dispatch = useDispatch();
  const list = useSelector((store) => store.data);
  useEffect(() => {
    dispatch(getData());
  }, [dispatch]);

  return (
    <div className={styles.root}>
      <div className="box-bg">
        <div className="title">1688进货红包</div>
        <div className="list">
          {list &&
            list.map((item, index) => (
              <div className="item" key={index}>
                <div className="price">
                  <span>{item.money}</span>元
                </div>

                <div className="info">
                  <div className="info-title">{item.title}</div>
                  <p className="info-desc">{item.description}</p>
                  <div className="info-time">
                    {item.restTime ? (
                      <>
                        距结束：
                        <CountDown time={item.restTime}></CountDown>
                      </>
                    ) : (
                      <span>
                        有效期：
                        {dayjs(item.time[0]).format("MM.DD HH:MM") +
                          "-" +
                          dayjs(item.time[1]).format("MM.DD HH:MM")}
                      </span>
                    )}
                  </div>
                </div>
                <div className="status">
                  <div className="status-btn">{item.status}</div>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

export default Coupons;
